<template>
  <Modal v-model="visible" title="批量禁用" :closable="false" :mask-closable="false" width="400">
    <div class="step">
      <h4>第一步</h4>
      <p>请按照数据模板的格式准备导入人员信息数据</p>
      <span style="color: #4876FF; cursor: pointer;" @click="onDownload">下载导入模板</span>
    </div>
    <div class="step">
      <h4>第二步</h4>
      <p>请填写好人员信息数据</p>
    </div>
    <div class="step">
      <h4>第三步</h4>
      <p>请上传已填写的模板信息</p>
      <div>
        <Upload ref="upload" :action="upload.reqUrl" :headers="upload.headers"
          :data="upload.data" :show-upload-list="false" accept=".xls, .xlsx, .XLS, XLSX"
          :max-size="10240" :on-exceeded-size="onExceededSize" :before-upload="onBeforeUpload"
          :on-success="onSuccess" style="margin: 5px 0;">
          <Button>上传文件</Button>
        </Upload>
        <p v-if="file">{{ file.name }}</p>
      </div>
    </div>

    <div slot="footer" class="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" :loading='loading' @click="onConfirm">导入</Button>
    </div>
  </Modal>
</template>

<script>
  import initiateMgr from '@/biz/commission/initiate.js'
  import organApi from '@/biz/backStage/organizationManagement'

  export default {
    props: {
      data: Object,
      refresh: Function
    },
    data() {
      return {
        visible: false,
        loading: false,
        upload: organApi.uploadDisableUser(),
        file: null,
      }
    },
    methods: {
      onConfirm() {
        if (!this.file) {
          this.$Message.error('请选择文件')
          return
        }
        this.loading = true
        this.$refs.upload.post(this.file)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        this.loading = false
        if (res.code == '200') {
          this.$Message.success('导入成功')
          this.$emit('success')
          this.hide()
        } else {
          this.$Message.error(res.msg)
        }
      },
      onBeforeUpload(file) {
        this.file = file
        return false
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      onDownload() {
        organApi.downloadDisableUser({
          fileName: '批量禁用人员模板.xlsx'
        })
      },
      show() {
        this.loading = false
        this.file = null
        this.visible = true
      },
      hide() {
        this.visible = false
      },
    },
  }
</script>

<style lang='scss' scoped>
  .step {
    margin: 0 0 24px 10px;

    h4 {
      margin-bottom: 5px;
    }
  }
</style>